<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>小疯子博客系统</title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="/bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="/datetimepicker/jquery.datetimepicker.css">

    <!-- jQuery -->
    <script src="/adminlte/plugins/jquery/jquery.min.js"></script>
    <!-- alert -->
    <script src="/js/alert.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/adminlte/dist/js/adminlte.min.js"></script>
    <script src="/bootstrap-table/bootstrap-table.js"></script>
    <script src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- datepicker -->
    <script src="/datetimepicker/jquery.datetimepicker.full.js"></script>

</head>
<body>
<div class="wrapper">
    <div id="updateDiv" style="display: none">
        <input id="alert" type="button" value="Alert" />
        <input id="confirm" type="button" value="Confirm" />
    </div>
    <!-- head view -->
    <#include "/common/head.ftl" />
    <!-- left view -->
    <#include "/common/left.ftl" />

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">问卷管理</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-3">
                        <input class="form-control" type="text" value="${startTime}" id="startTime" placeholder="问卷调查（起始）"/>
                    </div>
                    ~
                    <div class="col-lg-3">
                        <input class="form-control" type="text" value="${endTime}" id="endTime" placeholder="问卷调查（截止）"/>
                    </div>
                    <div class="col-lg-1">
                        <button id="setup" type="button" class="btn btn-primary">设置</button>
                    </div>
                    <div class="col-lg-12">
                        <table id="table" style="background-color: ActiveBorder"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main Footer -->
    <#include "/common/foot.ftl" />
</div>
</body>
<script>
    let $table;
    //初始化加载table
    function initMainTable() {
        $table = $('#table').bootstrapTable({
            url: "/share/survey/list",         //请求后台的URL（*）
            method: "GET",                      //请求方式（*）
            toolbar: "#toolbar",
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "desc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            formatSearch: function(){
                return "昵称";
            },
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    search: params.search
                };
                return temp;
            },
            columns: [
                {
                    field: 'name',
                    title: '昵称',
                    sortable: false,
                    align: 'center',
                    width: 150
                },
                {
                    field: 'telephone',
                    title: '手机号',
                    sortable: false,
                    align: 'center',
                    width: 150
                },
                {
                    field: 'sex',
                    title: '性别',
                    sortable: false,
                    align: 'center',
                    width: 100,
                    formatter: function(value,row,index) {
                        if(value==1){
                            return "男";
                        }else{
                            return "女";
                        }
                    }
                }, {
                    field: 'hobbys',
                    title: '爱好',
                    sortable: false,
                    align: 'center',
                    width: 150,
                    formatter: function(value,row,index){
                        let values = value.split(",")
                        let result = new Array();
                        for(let i=0;i<values.length;i++){
                            if(values[i]=='game'){
                                result.push("玩游戏");
                            }
                            if(values[i]=='bike'){
                                result.push("骑车");
                            }
                            if(values[i]=='run'){
                                result.push("跑步");
                            }
                            if(values[i]=='shop'){
                                result.push("购物");
                            }
                        }
                        return result.toString();
                    }
                }, {
                    field: 'advice',
                    title: '意见与建议',
                    sortable: false,
                    align: 'center',
                    width: 200
                }, {
                    field: 'createTime',
                    title: '提交时间',
                    sortable: false,
                    align: 'center',
                    width: 200
                }
            ],
            responseHandler: function (result) {
                if(result.status==1){
                    return {
                        "total": result.data.total,
                        "rows": result.data.records
                    };
                }
            },
            onLoadSuccess: function (data) {
            },
            onLoadError: function () {
            },
            onDblClickRow: function (row, $element) {
                // var id = row.ID;
                // EditViewById(id, 'view');
            }
        })
    }
    initMainTable();

    //切换到当前页面的事件
    window.onfocus = function(){
        //刷新表单
        $("#table").bootstrapTable('refresh');
    }

    $('#startTime').datetimepicker({
        lang:'ch'
    });
    $('#endTime').datetimepicker({
        lang:'ch'
    });

    $("#setup").click(function(){
        let startTime = $("#startTime").val();
        let endTime = $("#endTime").val();
        if(typeof(startTime)==undefined || startTime==null || startTime==""){
            myAlert("提示","请填写问卷开始时间");
            return;
        }
        if(typeof(endTime)==undefined || endTime==null || endTime==""){
            myAlert("提示","请填写问卷截止时间");
            return;
        }
        $.ajax({
            type: "get",
            url: "/share/survey/time",
            data: {
                startTime: startTime,
                endTime: endTime
            },
            success: function(result) {
                if(result.status==1){
                    myAlert('系统提示',result.message);
                }else{
                    myAlert('系统提示',result.message,function() {
                        window.location.reload();
                    });
                }
            }
        })
    })
</script>
</html>
